<template>
    <div class="detail">
        <el-page-header @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3"> 订单详情 </span>
            </template>
            <template #extra>
                <div class="flex items-center">
                    <el-button type="primary" @click="handleConfirm"
                        v-if="formData.payMethod == 0 && formData.orderStatus == 4">确认订单</el-button>
                    <el-button type="primary" @click="handlePayOrder" v-if="formData.payMethod == 1">支付订单</el-button>
                    <el-button @click="handleApplyAfterSale" v-if="formData.orderStatus == 5">申请售后</el-button>
                </div>
            </template>
        </el-page-header>
        <div class="detail-wrap">
            <el-form ref="formRef" :model="formData" label-width="120px">
                <el-divider content-position="left">
                    <div class="formTitle">订单信息</div>
                </el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单编号：" prop="orderNum">
                            {{ formData.orderNum }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单类型:" prop="orderContent">
                            <el-tag size="small">{{ orderContent[formData.orderContent] }}</el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单状态：" prop="orderStatus">
                            <el-tag size="small">{{ orderStatus[formData.orderStatus] }}</el-tag>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="创建时间:" prop="createTime">
                            {{ dateFormatter(formData.createTime) }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider content-position="left">
                    <div class="formTitle">客户信息</div>
                </el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户名称：" prop="username">
                            {{ formData.username }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="公司名称：" prop="enterpriseName">
                            {{ formData.enterpriseName }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号：" prop="phone">
                            {{ formData.phone }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider content-position="left">
                    <div class="formTitle">需求描述</div>
                </el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目名称：" prop="projectName">
                            {{ formData.projectName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="需求简述：" prop="demand">
                            {{ formData.demand }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="交付物：" prop="deliverables">
                            {{ formData.deliverables }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="期望交付时间：" prop="expectedDate">
                            {{ dateFormatter(formData.expectedDate) }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider content-position="left">
                    <div class="formTitle">报价信息</div>
                </el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="报价金额：" prop="quote">
                            <el-link :href="formData.quoteFile" target="_blank" style="color: #409eff;"
                                v-if="formData.quoteFile">
                                {{ formData.quote === null ? '-' : formData.quote + '元 (查看报价单)' }}
                            </el-link>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="支付方式：" prop="payMethod">
                            <el-tag size="small" type="success">{{ payMethod[formData.payMethod] }}</el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="报价时间：" prop="quoteTime">
                            {{ dateFormatter(formData.quoteTime) }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider content-position="left">
                    <div class="formTitle">订单支付</div>
                </el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单金额：" prop="quote">
                            {{ formData.quote }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="已支付金额：" prop="totalRepayAmount">
                            {{ formData.totalRepayAmount }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="待支付金额：" prop="waitRepayAmount">
                            {{ formData.waitRepayAmount }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="支付记录：" prop="systemFinancePaymentRecordsList">
                            <el-table :data="formData.systemFinancePaymentRecordsList">
                                <el-table-column prop="repayCount" label="支付次数" width="100" align="center" />
                                <el-table-column prop="repayAmount" label="支付金额" width="150" align="center" />
                                <el-table-column prop="operateTime" label="支付时间" width="180" align="center"
                                    :formatter="dateFormatter" />
                            </el-table>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider content-position="left">订单交付</el-divider>
            <el-table :data="list" :show-overflow-tooltip="true">
                <el-table-column label="文件名称" align="center" prop="name" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <div class="flex items-center justify-center">
                            <el-button type="primary" link @click="view(scope.row.url)">查看</el-button>
                            <el-button type="danger" link @click="download(scope.row)" v-if="formData.orderStatus == 5">
                                下载
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 支付订单 -->
        <PayOrder ref="payOrderRef" @success="getOrderDetail" />
        <!-- 申请售后 -->
        <ApplyAfterSale ref="applyAfterSaleRef" @success="getOrderDetail" />
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import PayOrder from "./payOrder.vue";
import ApplyAfterSale from "./applyAfterSale.vue";
import { service } from "@/config/service";
import { ElMessage, ElMessageBox } from "element-plus";
const payOrderRef = ref();
const applyAfterSaleRef = ref()
const { currentRoute, push, go } = useRouter();
const list = ref([])
const orderStatus = {
    0: '待报价',
    1: '待支付',
    2: '待确认',
    3: '待交付',
    4: '已交付',
    5: '已完成',
}
const orderContent = {
    0: '确认测试',
    1: '嵌入式软件测试',
    2: '系统安全测试',
    3: '代码安全审计',
    4: '性能效率测试',
    5: '信创测试',
    6: '测评资质咨询服务',
    7: '信息安全风险评估'
}
const payMethod = {
    0: '先付后用',
    1: '先用后付'
}
const formData = ref({
    orderNum: null,
    orderContent: '',
    orderStatus: '',
    createTime: '',
    username: '',
    enterpriseName: '',
    phone: '',
    projectName: '',
    demand: '',
    deliverables: '',
    expectedDate: '',
    quote: '',
    quoteFile: '',
    payMethod: '',
    quoteTime: '',
    totalRepayAmount: '',
    waitRepayAmount: '',
    systemFinancePaymentRecordsList: []
})
/** 返回上一级 */
const goBack = () => {
    go(-1)
}
const dateFormatter = (row, column, cellValue) => {
    return dayjs(cellValue).format("YYYY-MM-DD HH:mm:ss");
};
/** 交付物查看 */
const view = (url) => {
    window.open(url, '_blank')
}

/** 交付物下载 */
const download = ({ name, url }) => {
    // 创建隐藏的可下载链接
    const element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', name);

    // 触发点击
    document.body.appendChild(element);
    element.click();

    // 然后移除
    document.body.removeChild(element);
}

/** 支付订单 */
const handlePayOrder = () => {
    payOrderRef.value.open(formData.value);
};

/** 申请售后 */
const handleApplyAfterSale = () => {
    applyAfterSaleRef.value.open(currentRoute.value.query.id)
}

/** 确认订单 */
const handleConfirm = async () => {
    ElMessageBox.confirm("是否确认完成此订单？", "确认订单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            await service.get("/member/confirmOrder", {
                params: { orderId: currentRoute.value.query.id },
            });
            getOrderDetail()
            ElMessage({
                type: "success",
                message: "确认成功",
            });
        })
        .catch(() => { });

}
/** 获取订单详情 */
const getOrderDetail = async () => {
    try {
        const { data } = await service.get(`/testDeliverManage/getAllCommercialInfoByOrderId`, {
            params: { orderId: currentRoute.value.query.id },
        });
        if (data.quoteFile) {
            data.quoteFile = JSON.parse(data.quoteFile)[0].url
        } else {
            data.quoteFile = ''
        }
        formData.value = data
        list.value = JSON.parse(data.testReportFile)
    } catch (error) {

    }
}
onMounted(() => {
    getOrderDetail()
})
</script>

<style lang="scss" scoped>
.detail {
    height: 100%;
    padding: 0 10px;

    .el-page-header {
        padding: 15px 0;
    }

    &-wrap {
        height: calc(100% - 60px);
        overflow: auto;
    }

    .formTitle {
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .el-form-item {
        margin-bottom: 10px;
    }

    :deep(.el-card__body) {
        padding-top: 10px;
    }

    :deep(.el-divider__text) {
        font-weight: bold;
        font-size: 16px;
    }
}
</style>